<script setup>
import { ref } from "vue";
<<<<<<< HEAD
import { addGoodsService, goodsListService,deleteGoodsService ,updateGoodsService} from "@/api/good.js"; //引入商品列表接口
=======
import {
  addGoodsService,
  goodsListService,
  deleteGoodsService,
  updateGoodsService,
} from "@/api/good.js"; //引入商品列表接口
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
import { ElMessage, ElMessageBox } from "element-plus"; //引入提示框

const totalpage = ref(0); //总页数
const goodsList = ref([]); //商品列表
<<<<<<< HEAD
=======
const goods = ref({}); //商品对象
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
const queryConfig = ref({
  //分页参数
  pagenum: 1, //当前页码
  pagesize: 10, //每页条数
});
const getInit = async () => {
  //获取商品列表
  const res = await goodsListService(queryConfig.value); //调用商品列表接口
  goodsList.value = res.goods; //赋值给goodsList
  totalpage.value = res.total; //赋值给totalpage
};
const goodsVisible = ref(false); //添加商品弹框
const editVisible = ref(false); //编辑商品弹框
<<<<<<< HEAD
const goods = ref({}); //商品对象
const addRef = ref(); //添加商品弹框实例
const editRef = ref(); //编辑商品弹框实例
const addGoods = async () => {
  //添加商品
  await addRef.value.validate(); //验证表单
  await addGoodsService(goods.value); //  调用添加商品接口
=======
const addRef = ref(); //添加商品弹框实例
const editRef = ref(); //编辑商品弹框实例
const addGoods = async (goods) => {
  //添加商品
  console.log(goods.goods_name)
  await addRef.value.validate();//验证表单
  await addGoodsService(goods); //  调用添加商品接口
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
  goodsVisible.value = false; //关闭弹框
  await getInit(); //获取商品列表
  ElMessage.success("添加成功"); //提示框
};
<<<<<<< HEAD
const editGoods = async () => {
  //编辑商品
  console.log(goods.value);
  await editRef.value.validate();
  await updateGoodsService(goods.value);
  editVisible.value = false;
  await getInit();
  ElMessage.success("编辑成功");
  editGoods.value=false;

};

const removeGoods = async (id) => {  
  ElMessageBox.confirm("此操作将永久删除该商品, 是否继续?", "提示", {  
    confirmButtonText: "确定",  
    cancelButtonText: "取消"  
  }).then(async () => {  
    try {  
      await deleteGoodsService(id);  
      ElMessage.success("删除成功");  
    } catch (error) {  
      // 这里处理 deleteGoodsService 抛出的错误  
      ElMessage.error("删除失败: " + error.message || "未知错误");  
    }  
  }).catch(() => {  
    // 这里处理用户取消或关闭消息框的情况  
    ElMessage.info("已取消");  
  });  
=======

const editGoods = async (goods) => {
  //await editRef.value.validate();
  await updateGoodsService(goods.value.goods_id, goods.value);
  editVisible.value = false; //关闭弹框
  await getInit();
  ElMessage.success("编辑成功"); //提示框
};

const removeGoods = async (id) => {
  ElMessageBox.confirm("此操作将永久删除该商品, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async () => {
      try {
        await deleteGoodsService(id);
        ElMessage.success("删除成功");
      } catch (error) {
        // 这里处理 deleteGoodsService 抛出的错误
        ElMessage.error("删除失败: " + error.message || "未知错误");
      }
    })
    .catch(() => {
      // 这里处理用户取消或关闭消息框的情况
      ElMessage.info("已取消");
    });
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
};
const rules = {
  //验证规则
  goods_name: [
    //商品名称
    { required: true, message: "请输入商品名称", trigger: "blur" }, //必填
    { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }, //长度
  ],
  goods_price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
  goods_number: [
    { required: true, message: "请输入商品数量", trigger: "blur" },
  ],
  goods_weight: [
    { required: true, message: "请输入商品重量", trigger: "blur" },
  ],
  goods_introduce: [
    { required: true, message: "请输入商品描述", trigger: "blur" },
  ],
  pics: [{ required: true, message: "请上传商品图片", trigger: "blur" }],
  attrs: [{ required: true, message: "请上传商品参数", trigger: "blur" }],
};
getInit(); //获取商品列表
</script>


<template>
  <el-card>
    <template #header>
      <div class="header">
        <h2>商品列表</h2>
<<<<<<< HEAD
        <el-button type="primary" @click="goodsVisible = true">添加商品</el-button
        >
=======
        <el-button type="primary" @click="goodsVisible = true"
          >添加商品</el-button>
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
      </div>
    </template>
    <el-table :data="goodsList">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="goods_name" label="商品名称">
        <template #default="{ row }">
          <span
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
            >{{ row.goods_name }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格" width="120" />
      <el-table-column prop="goods_number" label="商品数量" width="120" />
      <el-table-column prop="goods_weight" label="商品重量" width="120" />
      <el-table-column label="商品状态" width="120">
        <template #default="{ row }">
          <el-tag v-if="row.goods_status === 0" type="danger">未通过</el-tag>
          <el-tag v-else-if="row.goods_status === 1" type="warning"
            >审核中</el-tag
          >
          <el-tag v-else type="success">已审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="添加时间" width="140" />
      <el-table-column prop="is_promote" label="是否热销" width="120">
        <template #default="{ row }">
          <el-tag v-if="row.is_promote === false" type="danger">否</el-tag>
          <el-tag v-else type="success">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hot_mumber" label="热卖数量" width="120" />
      <el-table-column label="操作">
        <template #default="{ row }">
<<<<<<< HEAD
          <el-button @click="() => {
                editVisible = true;
                goods.value = row;
              }">编辑</el-button>
          <el-button type="danger" @click="removeGoods(row.goods_id)">删除</el-button>
=======
          <el-button
            @click="
              () => {
                editVisible = true;
                goods.value = row;
              }
            "
            >编辑</el-button
          >
          <el-button type="danger" @click="removeGoods(row.goods_id)"
            >删除</el-button
          >
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
<<<<<<< HEAD
        :page-sizes="[10, 15, 20, 25, 30]"
=======
        :page-sizes="[10, 15, 20, 25, 30]" 
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
        :total="totalpage"
        :page-size="queryConfig.pagesize"
        :current-page="queryConfig.pagenum"
        @update:pageSize="
          (val) => {
            queryConfig.pagesize = val;
            getInit();
          }
        "
        @update:currentPage="
          (val) => {
            queryConfig.pagenum = val;
            getInit();
          }
        "
        @prevClick="getInit"
        @nextClick="getInit"
      />
    </div>
  </el-card>
  <el-dialog title="添加商品" v-model="goodsVisible">
    <el-form :model="goods" ref="addRef" :rules="rules">
      <el-form-item label="名称" prop="goods_name">
        <el-input v-model="goods.goods_name" />
      </el-form-item>
      <el-form-item label="分类" prop="goods_cat">
        <el-input v-model="goods.goods_cat" />
      </el-form-item>
      <el-form-item label="价格" prop="goods_price">
        <el-input v-model="goods.goods_price" />
      </el-form-item>
      <el-form-item label="数量" prop="goods_number">
        <el-input v-model="goods.goods_number" />
      </el-form-item>
      <el-form-item label="重量" prop="goods_weight">
        <el-input v-model="goods.goods_weight" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="goods.goods_introduce" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addGoods(goods)">添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-drawer title="编辑商品" v-model="editVisible">
    <el-form :model="goods" ref="editRef" >
      <el-form-item label="名称">
        <el-input v-model="goods.value.goods_name" />
      </el-form-item>
      <!-- 请求体中没有这一类 -->
      <el-form-item label="分类">
<<<<<<< HEAD
        <el-input v-model="goods.value.cat_id" />
=======
        <el-input v-model="goods.value.goods_cat" />
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="goods.value.goods_price" />
      </el-form-item>
      <el-form-item label="数量">
        <el-input v-model="goods.value.goods_number" />
      </el-form-item>
      <el-form-item label="重量">
        <el-input v-model="goods.value.goods_weight" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="goods.value.goods_introduce" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="editGoods(goods)">修改</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
.el-form {
  .el-button {
    width: 100%;
  }
}

.el-card {
  .header {
    display: flex;
    justify-content: space-between;
  }

  .page {
    display: flex;
    justify-content: center;

    .el-pagination {
      margin: 10px;
    }
  }
}
</style>
